<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Detail</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/nprogress.css">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/style.css">
<link rel="stylesheet" type="text/css" href="http://192.168.112.141/css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="http://192.168.112.141/images/icon.png">
<link rel="shortcut icon" href="http://192.168.112.141/images/favicon.ico">
<script src="http://192.168.112.141/js/jquery-2.1.4.min.js"></script>
<script src="http://192.168.112.141/js/nprogress.js"></script>
<!--[if gte IE 9]>
<script src="http://192.168.112.141/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://192.168.112.141/js/html5shiv.min.js" type="text/javascript"></script>
<script src="http://192.168.112.141/js/respond.min.js" type="text/javascript"></script>
<script src="http://192.168.112.141/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
<script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>
<body class="user-select single">
<header class="header">
	<nav class="navbar navbar-default" id="navbar">
		<div class="container">
			<div class="header-topbar hidden-xs link-border">
				<ul class="site-nav topmenu">
					<#if nickname??>
						<li><a href="http://admin.news.com.cn:8080">内容管理(${nickname})</a></li>
					<#else>
						<li><a href="http://login.news.com.cn:8081?articleId=${article.articleId}">登录</a></li>
						<li><a href="#">注册</a></li>
					</#if>
				</ul>
				勤记录 懂分享
			</div>
			<div class="navbar-header">
				<h1 class="logo hvr-bounce-in">
					<a href="#" title="木庄网络博客">
						<img src="http://192.168.112.141/images/201610171329086541.png" alt="木庄网络博客">
					</a>
				</h1>
			</div>
			<div class="collapse navbar-collapse" id="header-navbar">
				<ul class="nav navbar-nav navbar-right">
					<li><a title="网站首页" href="index.html">网站首页</a></li>
					<li><a title="列表页" href="list.html">频道页</a></li>
					<li><a title="详细页" href="show.html">频道页</a></li>
					<li><a title="列表页" href="list.html">频道页</a></li>
					<li><a title="详细页" href="show.html">频道页</a></li>
				</ul>
			</div>
		</div>
	</nav>
</header>
<section class="container">
	<div class="content-wrap">
		<div class="content">
			<header class="article-header">
				<h1 class="article-title">
					<a href="javascript:void(0)">${article.title}</a>
				</h1>
				<div class="article-meta">
					<span class="item article-meta-category">
						<i class="glyphicon glyphicon-list"></i> 
						<a href="javascript:void(0)">${article.category.categoryName}</a>
					</span> 
					<span class="item article-meta-time">
						<time class="time">
							<i class="glyphicon glyphicon-time"></i> ${article.createDate?string("yyyy-MM-dd")}
						</time>
					</span> 
					<span class="item article-meta-views">
						<i class="glyphicon glyphicon-eye-open"></i> ${article.visitorNum}
					</span>
					<span class="item article-meta-comment">
						<i class="glyphicon glyphicon-comment"></i>
						<span id="comment-num">0</span>
					</span>
				</div>
			</header>
			<article class="article-content">
				${article.content}
			</article>
			<div class="title" id="comment">
				<h3>评论</h3>
			</div>
			<div id="respond">
				<form id="comment-form" name="comment-form" action="" method="POST">
					<div class="comment">
						<div class="comment-box">
							<textarea placeholder="您的评论或留言（必填）" name="content" id="comment-textarea" cols="100%" rows="3" tabindex="3"></textarea>
							<div class="comment-ctrl">
								<div class="comment-prompt" style="display: none;">
									<i class="fa fa-spin fa-circle-o-notch"></i> 
									<span class="comment-prompt-text">评论正在提交中...请稍后</span> 
								</div>
								<div class="comment-success" style="display: none;"> 
									<i class="fa fa-check"></i> 
									<span class="comment-prompt-text">评论提交成功...</span> 
								</div>
								<button type="button" onclick="saveComment(${article.articleId})" name="comment-submit" id="comment-submit" tabindex="4">评论</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div id="postcomments">
				<ol id="comment_list" class="commentlist">
				</ol>
				<nav class="pagination">
				</nav>
			</div>
		</div>
	</div>
	
	<aside class="sidebar">
		<div class="fixed">
			<div class="widget widget_search">
				<form class="navbar-form" action="/Search" method="post">
					<div class="input-group">
						<input type="text" name="keyword" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
						<span class="input-group-btn">
							<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
						</span>
					</div>
				</form>
			</div>
		</div>
		<div class="widget widget_hot">
			<h3>热评文章</h3>
			<ul id="article-list">
			</ul>
		</div>
	</aside>
</section>

<footer class="footer">
	<div class="container">
		<p>Copyright &copy; 2016.Company name All rights reserved.</p>
	</div>
</footer>

<script src="http://192.168.112.141/js/bootstrap.min.js"></script>
<script src="http://192.168.112.141/js/jquery.ias.js"></script>
<script src="http://192.168.112.141/js/scripts.js"></script>
<script type="text/javascript">
function showComment(comment, index) {
	let text = '<li class="comment-content"><span class="comment-f">#' + index + '</span><div class="comment-main"><p>' +
		'<a class="address" href="#" rel="nofollow" target="_blank">' + comment.author.nickname + '</a><span class="time">(' +
		comment.createTime + ')</span><br>' + comment.content + '</p></div></li>';

	return text;
}

function showPagination(aid, page, total) {
	let text = '<ul><li class="prev-page">';

	if (page == 1) {
		text += '<a href="javascript:void(0)">上一页</a></li>';
	} else {
		text += '<a href="javascript:void(0)" onclick="listComments(' + aid + ',' + (page-1) + ')">上一页</a></li>';
	}

	for(i = 1; i <= total; i++) {
		if (i == page) {
			text += '<li class="active"><span>' + i + '</span></li>';
		} else {
			text += '<li><a href="javascript:void(0);" onclick="listComments(' + aid + ',' + i + ')">' + i + '</a></li>';
		}
	}

	text += '<li class="next-page">';

	if (page == total) {
		text += '<a href="javascript:void(0)">下一页</a></li></ul>';
	} else {
		text += '<a href="javascript:void(0)" onclick="listComments(' + aid + ',' + (page+1) + ')">下一页</a></li></ul>';
	}

	return text;
}

function listComments(articleId, pageNum) {
	let content = '';
	$.ajax({
		type: 'POST',
		url: '/comment/list_comments?articleId=' + articleId + "&pageNum=" + pageNum,
		dataType: 'json',
		success:function(data){
			$.each(data.dataList, function (index, value) {
				content += showComment(value, index + 1);
			});

			$("#comment-num").text(data.rowCount);
			$("#comment_list").html(content);
			if (data.rowCount > 0) {
				$(".pagination").html(showPagination(articleId, pageNum, data.pageCount));
			}
		}
	})
}

function showArticle(article) {
	let text = '<li><a href="/article/get_detail?articleId=' + article.articleId + '" target="_blank"><span class="thumbnail">' +
		'<img class="thumb" src="http://192.168.112.141/images/1000.jpg" style="display: block;"></span>' +
		'<span class="text" style="padding-bottom:10px">' + article.title + '</span><span class="muted">' +
		'<i class="glyphicon glyphicon-time"></i> ' + article.createDate + '</span><span class="muted">' +
		'<i class="glyphicon glyphicon-eye-open"></i> ' + article.commentNum + '</span></a></li>';

	return text;
}

function saveComment(articleId) {
	$.ajax({
		type: 'POST',
		url: '/comment/save_comment?articleId=' + articleId,
		data: $("#comment-form").serialize(),
		dataType: 'json',
		success:function(data){
			if (data.success) {
				$("#comment-textarea").val("");
				listComments(articleId, 1); //刷新评论列表
			} else {
				alert(data.message);
			}
		}
	})
}

function listTopComments(num) {
	let text = "";
	$.ajax({
		type: 'POST',
		url: '/comment/list_top?num=' + num,
		dataType: 'json',
		success:function(data){
			$.each(data, function (index, value) {
				text += showArticle(value);
			});

			$("#article-list").html(text);
		}
	})
}

$(function () {
	listComments(${article.articleId}, 1);
	listTopComments(5);
})
</script>
</body>
</html>
